import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,InputNumber , Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class EditModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rackBrandId: '',
            rackTypeId: '',
        }
    }
    onOk = () => {
        const { type, dispatch } = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                dispatch({
                    type: `cabinet/${type}`,
                    payload: values,
                    resetFields: this.props.form.resetFields,
                })
            }
            // this.setState = {
            //     rackBrandId: '',
            //     rackTypeId: '',
            // }
        });
    }

    onCancel=()=> {
        const {dispatch } = this.props;
        dispatch({
            type: 'cabinet/hideModal',
        })
        // this.setState = {
        //     rackBrandId: '',
        //     rackTypeId: '',
        // }
    }
    render() {
        const { dispatch, children, item, type, roomList,cabinetExtList, rackTypeList, rackBrandList, rackModelList, cabinetGroupList } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 7 },
            wrapperCol: { span: 16 },
        };

        const loopRoom = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });

        const loopCabinetGroup = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });
        const loopRackType = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });
        const loopRackBrand = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });
        const loopRackModel = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });

        const handleTypeChange = (value) => {
            this.setState({
                rackTypeId: value,
            })
            dispatch({
                type: `cabinet/queryRackModelList`,
                payload: { rackTypeId: value, rackBrandId: this.state.rackBrandId },
            })
        }
        const handleBrandChange = (value) => {
            this.setState({
                rackBrandId: value,
            })
            dispatch({
                type: `cabinet/queryRackModelList`,
                payload: { rackTypeId: this.state.rackTypeId, rackBrandId: value },
            })
        }
        const handleRoomChange = (value) => {
            dispatch({
                type: `cabinet/qryCabinetExtList`,
                payload: { roomId: value },
            })
            this.props.form.setFieldsValue({ rowNum: undefined });
            this.props.form.setFieldsValue({ colNum: undefined });
        }

        const handRowNumChange=()=>{
            var this_=this;
            var rowNum = this.props.form.getFieldValue("rowNum");
            var colNum = this.props.form.getFieldValue("colNum");
            if(rowNum==undefined||rowNum==""||colNum==undefined||colNum=="")return false;
            for(var i=0;i<cabinetExtList.length;i++){
                if(rowNum==cabinetExtList[i].rowNum
                        &&colNum==cabinetExtList[i].colNum){
                    Modal.warning({
                        title: '提示',
                        content: '该行已被占用',
                        onOk(){
                            this_.props.form.setFieldsValue({ rowNum: undefined });
                        }
                    })
                    return;
                }
            }
        }

        const handColNumChange=(value)=>{
            var this_=this;
            var rowNum = this.props.form.getFieldValue("rowNum");
            var colNum = this.props.form.getFieldValue("colNum");
            if(rowNum==undefined||rowNum==""||colNum==undefined||colNum=="")return false;
            for(var i=0;i<cabinetExtList.length;i++){
                if(rowNum==cabinetExtList[i].rowNum
                        &&colNum==cabinetExtList[i].colNum){
                    Modal.warning({
                        title: '提示',
                        content: '该列已被占用',
                        onOk(){
                            this_.props.form.setFieldsValue({ colNum: undefined });
                        }
                    })
                    return;
                }
            }
        }

        return (
            <span>
                <Modal
                    maskClosable={this.props.maskClosable}
                    confirmLoading={this.props.confirmLoading}
                    title={this.props.title}
                    visible={this.props.visible}
                    width={700}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    key={this.props.newKey}
                >
                
                <div style={{ width: 'auto', backgroundColor: '#fff' }}>
                    <div style={{}}>
                    <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>

                                <Form layout="horizontal" onSubmit={this.addTransferDetailHandler}>
                                    <FormItem style={{ marginBottom: '0px' }}>
                                        {getFieldDecorator('id', { initialValue: item.id_ })(
                                            <Input type="hidden" />
                                        )}
                                    </FormItem>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机房名称'
                                                hasFeedback>
                                                {
                                                    getFieldDecorator('roomId', {
                                                        initialValue: item.roomId_ ? item.roomId_ + '' : undefined,
                                                        rules: [{
                                                            required: true, message: '请选择机房名称',
                                                        }]
                                                    })(
                                                        <Select
                                                            showSearch
                                                            placeholder="选择机房"
                                                            onChange={handleRoomChange}
                                                            optionFilterProp="children"
                                                        >
                                                            {loopRoom(roomList)}

                                                        </Select>
                                                        )
                                                }
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜名称'
                                                hasFeedback>
                                                {getFieldDecorator('assetName', {
                                                    initialValue: item.assetName ? item.assetName + '' : undefined,
                                                    rules: [{
                                                        required: true, whitespace: true, message: '请输入机柜名称',
                                                    }]
                                                })(
                                                    <Input type="text" placeholder="机柜名称" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        
                                    </Row>
                                    <Row gutter={16} >
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜组名称'
                                                hasFeedback>
                                                {
                                                    getFieldDecorator('cabinetGroupId', {
                                                        initialValue: item.cabinetGroupId_ ? item.cabinetGroupId_ + '' : undefined,
                                                        rules: [{
                                                            required: true, message: '请选择机柜组名称',
                                                        }]
                                                    })(
                                                        <Select
                                                            showSearch
                                                            placeholder="选择机柜组名称"
                                                            optionFilterProp="children"
                                                        >
                                                            {loopCabinetGroup(cabinetGroupList)}

                                                        </Select>
                                                        )
                                                }
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜所在行'
                                                hasFeedback>
                                                {getFieldDecorator('rowNum', {
                                                    initialValue: item.rowNum ? item.rowNum + '' : undefined,                                                  
                                                })(
                                                    <Input type="number" 
                                                    min={0} placeholder="机柜所在行" 
                                                    onBlur={handRowNumChange} />
                                                    )}
                                            </FormItem>
                                        </Col>                                       
                                        
                                    </Row>
                                    <Row gutter={16}>
                                       <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜所在列'
                                                hasFeedback>
                                                {getFieldDecorator('colNum', {
                                                    initialValue: item.colNum ? item.colNum + '' : undefined,
                                                })(
                                                    <Input  type="number" 
                                                    min={0} placeholder="机柜所在列" 
                                                    onBlur={handColNumChange}/>
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜类型'
                                                hasFeedback>
                                                {
                                                    getFieldDecorator('rackTypeId', {
                                                        initialValue: item.rackTypeId_ ? item.rackTypeId_ + '' : undefined,
                                                        rules: [{
                                                            required: true, message: '请选择机柜类型名称',
                                                        }]
                                                    })(
                                                        <Select
                                                            showSearch
                                                            placeholder="选择机柜类型"
                                                            onChange={handleTypeChange}
                                                            optionFilterProp="children"
                                                        >
                                                            {loopRackType(rackTypeList)}

                                                        </Select>
                                                        )
                                                }
                                            </FormItem>
                                        </Col>                                        
                                    </Row>

                                    <Row gutter={16} >                                       
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜品牌'
                                                hasFeedback>
                                                {
                                                    getFieldDecorator('rackBrandId', {
                                                        initialValue: item.rackBrandId_ ? item.rackBrandId_ + '' : undefined,
                                                        rules: [{
                                                            required: true, message: '请选择机柜品牌',
                                                        }]
                                                    })(
                                                        <Select
                                                            showSearch
                                                            placeholder="选择机柜类型"
                                                            onChange={handleBrandChange}
                                                            optionFilterProp="children"
                                                        >
                                                            {loopRackBrand(rackBrandList)}

                                                        </Select>
                                                        )
                                                }
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='机柜型号'
                                                hasFeedback>
                                                {
                                                    getFieldDecorator('rackModelId', {
                                                        initialValue: item.rackModelId_ ? item.rackModelId_ + '' : undefined,
                                                        rules: [{
                                                            required: true, message: '请选择机柜型号',
                                                        }]
                                                    })(
                                                        <Select
                                                            showSearch
                                                            placeholder="选择机柜型号"
                                                            optionFilterProp="children"
                                                        >
                                                            {loopRackModel(rackModelList)}

                                                        </Select>
                                                        )
                                                }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                       <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='x坐标'
                                                hasFeedback>
                                                {getFieldDecorator('x', {
                                                    initialValue: item.x ? item.x + '' : undefined,
                                                    rules: [{
                                                        whitespace: true, message: '请输入x坐标',
                                                    }]
                                                })(
                                                    <Input type="number" placeholder="x坐标"  />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='y坐标'
                                                hasFeedback>
                                                {getFieldDecorator('y', {
                                                    initialValue: item.y ? item.y + '' : undefined,
                                                    rules: [{
                                                        whitespace: true, message: '请输入y坐标',
                                                    }]
                                                })(
                                                    <Input type="number" placeholder="y坐标" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='z坐标'
                                                hasFeedback>
                                                {getFieldDecorator('z', {
                                                    initialValue: item.z ? item.z + '' : undefined,
                                                    rules: [{
                                                        whitespace: true, message: '请输入z坐标',
                                                    }]
                                                })(
                                                    <Input type="number" placeholder="z坐标" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label='角度'
                                                hasFeedback>
                                                {getFieldDecorator('rotation', {
                                                    initialValue: item.rotation?item.rotation+'':"",
                                                    rules: [{
                                                        whitespace: true, message: '请输入角度',
                                                    }]
                                                })(
                                                    <Input type="number" placeholder="角度" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>

                                    <Row gutter={16}>
                                        <Col span={12}>
                                                <FormItem
                                                    {...formItemLayout}
                                                    label='左电源名称'
                                                    hasFeedback>
                                                    {getFieldDecorator('leftPower', {
                                                        initialValue: item.leftPower ? item.leftPower + '' : undefined,
                                                        rules: [{
                                                            whitespace: true, message: '请输入左电源名称',
                                                        }]
                                                    })(
                                                        <Input type="text" placeholder="左电源名称" />
                                                        )}
                                                </FormItem>
                                            </Col>
                                            <Col span={12}>
                                                <FormItem
                                                    {...formItemLayout}
                                                    label='右电源名称'
                                                    hasFeedback>
                                                    {getFieldDecorator('rightPower', {
                                                        initialValue: item.rightPower ? item.rightPower + '' : undefined,
                                                        rules: [{
                                                            whitespace: true, message: '请输入右电源名称',
                                                        }]
                                                    })(
                                                        <Input type="text" placeholder="右电源名称" />
                                                        )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                </Form>
                            </div>
                        </div>
                    </div>
                </Modal>
            </span>
        );
    }

}

export default Form.create()(EditModal)
